話說，這個系統我使用了以後，覺得還是不夠好用，覺得每次開啟以後

資料都要一直重複填寫

這樣的UX體驗似乎不夠好，所以今天來做個『歷史記錄』

首先是右上角放一個清單按鈕

首先依舊是切版面，並且搭配hover與click完成點擊效果

html

<table>
    <thead>
        <tr>
            <th>類型</th>
            <th>日期</th>
            <th>內容</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in historyList" v-if="item" class="app-tr--hover" @click="useHistory(item)">
            <td>{{ item | formatType }}</td>
            <td>{{ item.rideDate }}</td>
            <td>{{ item | formatContent }}</td>
        </tr>
    </tbody>
</table>

使用vue fliters做資料變化

filters:{
    formatType(value){
        switch(value.type){
            case 'time':
                return '依時刻'
            case 'station':
                return '依車站'
            case 'trainno':
                return '依車次'
        }
    },
    formatContent(value){
        switch(value.type){
            case 'time':
                return `${value.startStation} -> ${value.endStation}`
            case 'station':
                return value.singleStation
            case 'trainno':
                return value.trainno
        }
    }
},

先看看畫面的結果

綁定帶入事件，因為使用vue所以非常容易完成，把資料帶入就可以切換頁面了

methods:{
    useHistory(history){
        switch(history.type){
            case 'time':
                this.searchForm.startStation = history.startStation
                this.searchForm.endStation = history.endStation
                this.searchForm.isTransfer = history.isTransfer
                this.searchForm.startTime = history.startTime
                this.searchForm.endTime = history.endTime
                this.searchForm.timeType = history.timeType
                this.searchForm.checkType = history.checkType
                break
            case 'station':
                this.searchForm.singleStation = history.singleStation
                break
            case 'trainno':
                this.searchForm.trainNo = history.trainNo
                break
        }
        this.searchForm.rideDate = history.rideDate
        this.currentPage = history.type
    }
}

明天再用後台腳本以及storage完成功能囉，大家晚安